<template>
  <div class="orderDetail_container pr-1 pl-1">
		<div class="orderDetail_container_detail br-16 padding-1 mb-1">
			<div class="detail_title mb-1">
				<div class="detail_title_left">
					<img :src="dataInfo.logo" class="mr-0" alt="">
					<span>{{ dataInfo.name }}</span>
				</div>
				<div class="detail_title_right">
					<span class="exclusive_icon mr-0">{{ dataInfo.is_exclusive }}</span>
					<span v-if="dataInfo.type == 1" class="running_icon">{{ $t("运行中") }}</span>
					<span v-if="dataInfo.type == 2" class="redeeming_icon">{{ $t("赎回中") }}</span>
					<span v-if="dataInfo.type == 3" class="expired_icon">{{ $t("已到期") }}</span>
				</div>
			</div>
			<div class="detail_banner padding-1 mb-1">
				<div class="detail_banner_left">
					<div class="detail_banner_left_title">
						{{ dataInfo.earnings }}SAT
					</div>
					<div class="detail_banner_left_value">
						{{ $t("累计收益") }}
					</div>
				</div>
				<div class="detail_banner_right">
					<div class="detail_banner_left_title">
						{{ dataInfo.yield }}
					</div>
					<div class="detail_banner_left_value">
						{{ $t("累计收益率") }}
					</div>
				</div>
			</div>
			<div class="detail_content">
				<div class="detail_content_item">
					<div class="detail_content_item_label">
						{{ $t("订单编号") }}
					</div>
					<div class="detail_content_item_value">
						<span>{{ dataInfo.token }}</span>
						<span>&nbsp;|&nbsp;</span>
						<img src="@/image/homePage/aiImageDetail/cope.png"  @click="copyText" alt="">
					</div>
				</div>
				<div class="detail_content_item">
					<div class="detail_content_item_label">
						{{ $t("量化金额") }}
					</div>
					<div class="detail_content_item_value">
						{{ dataInfo.quantitativeAmount }}&nbsp;{{ dataInfo.currency }}
					</div>
				</div>
				<div class="detail_content_item">
					<div class="detail_content_item_label">
						{{ $t("量化价值") }}
					</div>
					<div class="detail_content_item_value">
						{{ dataInfo.quantitativeValue }}&nbsp;{{ $t("SUSD") }}
					</div>
				</div>
				<div class="detail_content_item">
					<div class="detail_content_item_label">
						{{ $t("运行天数") }}
					</div>
					<div class="detail_content_item_value">
						{{ dataInfo.dayNumber }}&nbsp;{{ $t("天") }}
					</div>
				</div>
				<div class="detail_content_item">
					<div class="detail_content_item_label">
						{{ $t("交易时间") }}
					</div>
					<div class="detail_content_item_value">
						{{ dataInfo.date }}
					</div>
				</div>
			</div>
			<div class="detail_content_btn">
				<button class="br-24" @click="redeemProductClick" :disabled="redeemProductBtnDisabled">
					{{ redeemProductText }}
				</button>
			</div>
		</div>
		<div class="orderDetail_container_content">
			<div class="orderDetail_container_content_title mb-1">
				{{ $t("量化交易明细")  }}
			</div>
			<div class="orderDetail_container_content_item br-16 mb-1 pr-1 pl-1" v-for="(item , index) in detailList" :key="index">
				<div class="content_item_title mb-0">
					<div class="content_item_title_left">
						<span class="content_item_title_left_label">{{ item.name }}</span>
						<span>/{{ item.label }}</span>
					</div>
					<div :class="[item.yield >=0 ? 'green_icon' : 'red_icon']">{{ item.yield > 0 ? "+"+item.yield:item.yield }}%</div>
				</div>
				<div class="content_item_deal">
					<div>{{ item.buy.time }}</div>
					<div>{{ item.buy.sum }}</div>
					<div>{{ $t("BUY") }}</div>
				</div>
				<div class="content_item_deal mb-0">
					<div>{{ item.sell.time }}</div>
					<div>{{ item.sell.sum }}</div>
					<div>{{ $t("SELL") }}</div>
				</div>
				<div class="content_item_ways">
					<div class="content_item_ways_item" v-for="(v , i) in images" :key="i">
						<img class="mr-0" :src="v.url" alt="">
						<span>{{ v.name }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { clipboard, confirmDialog } from '@/utils';
import { getOrderDetail, redeemProduct } from "@/request/aiQuantization"
import BusinessUtils from '@/utils/business';
export default {
	name: "OrderDetail",
	data(){
		return {
			id:'',
			dataInfo: {

			},
			detailList:[],
			images:[
				{
					url: require("@/image/aiQuantization/myOrder/exchanges1.png"),
					name : this.$t("Coinbase")
				},
				{
					url: require("@/image/aiQuantization/myOrder/exchanges2.png"),
					name : this.$t("Binance")
				},
				{
					url: require("@/image/aiQuantization/myOrder/exchanges3.png"),
					name : this.$t("Bybit")
				},
				{
					url: require("@/image/aiQuantization/myOrder/exchanges4.png"),
					name : this.$t("OKX")
				},
			],
			redeemTime: 0, // 赎回倒计时
			redeemInterval: null, // 赎回倒计时的定时器
			redeemProductText: '',
			redeemProductBtnDisabled: false
		}
	},
	watch: {
		dataInfo: {
			handler(newVal, oldVal) {
				if(this.dataInfo.product_type == 1){
					this.redeemProductBtnDisabled = true;
					if(this.dataInfo.dayNum <= 0){
						this.redeemProductText = this.$t("已赎回");
					}else{
						this.redeemProductText = this.$t("倒计时，{day} 天后到期", { day: this.dataInfo.dayNum });
					}
				}else{
					if (this.redeemInterval) {
						clearInterval(this.redeemInterval);
						this.redeemInterval = null;
					}

					if (this.dataInfo.is_redeem != 1) {
						this.redeemProductBtnDisabled = false;
						this.redeemProductText = this.$t("赎回投资");
					} else {
						this.redeemTime = this.dataInfo.redeemTime;
							
						this.redeemInterval = setInterval(() => {
							if (this.redeemTime > 0) {
								this.redeemTime--;
							} else {
								this.redeemTime = 0;
								clearInterval(this.redeemInterval);
								this.redeemInterval = null;
							}
							this.refreshRedeemTimeText();
						}, 1000);

						this.redeemProductBtnDisabled = true;
						this.refreshRedeemTimeText();
					} 
				}
   			},
			deep: true,
			immediate: true
		}

	},
	computed: {

	},
	mounted(){
		this.id = this.$route.params.id;
		this.getOrderDetail();
	},
	methods:{
		refreshRedeemTimeText(){
			if (this.redeemTime <= 0) {
				this.redeemProductText = this.$t("已赎回");
			} else {
				let time = this.formatTime(this.redeemTime)
				this.redeemProductText = this.$t("倒计时：{time}", { time: time });
			}
		},

		formatTime(seconds) {
			const h = Math.floor(seconds / 3600);
			const m = Math.floor((seconds % 3600) / 60);
			const s = seconds % 60;
			return [
			h.toString().padStart(2, '0'),
			m.toString().padStart(2, '0'),
			s.toString().padStart(2, '0')
			].join(':');
		},

		async redeemProductClick(){
			const result = await confirmDialog({
				title: this.$t("请输入支付密码"),
				confirmText: this.$t("确认"),
				cancelText: this.$t("取消"),
			})
			if (result) {
				redeemProduct({id:this.id,pwd:result}).then(res=>{
					if(res.code == 1){
						this.getOrderDetail();
					}else{
						this.$toast.fail(this.$t("赎回失败"));
					}
				})
			} else {
				this.$toast.fail(this.$t("取消赎回"));
			}
		},
		getOrderDetail(){
			getOrderDetail({id:this.id}).then(res=>{
				if(res.code == 1){
					let info = res.data.data

					let is_exclusive
					if(info.type == 1){
						is_exclusive = this.$t("专属权益");
					}
					else if(info.type == 2){
						is_exclusive = this.$t("投资套餐")+" L"+info.weight;
					}
					else if(info.type == 3){
						is_exclusive = this.$t("体验套餐");
					}

					this.dataInfo = {
						name: info.product_name,
						logo: require("@/image/aiQuantization/myOrder/aIQuantificationBg3.png"),
						is_exclusive: is_exclusive,
						type: this.disposeStatus(info),
						date: info.createtime,
						token: info.order_no,
						dayNumber: info.execute_day,
						yield: Number(info.leiji_rate).toFixed(1),
						earnings: Number(info.leiji_money).toFixed(4),
						quantitativeAmount: Number(info.order_amount).toFixed(4),
						quantitativeValue: Number(info.susd).toFixed(4),
						currency: info.currency,
						dayNum: info.surplus_day,
						is_redeem: info.is_redeem,
						product_type: info.type,
						redeemTime: info.redeem_time
					};

					this.detailList = res.data.order.data.map(item=>{
						return {
							name: item.dui[0],
							label: item.dui[1] || 'USDT',
							yield : Number(item.rate).toFixed(2),
							buy:{
								time:item.buy_time,
								sum:Number(item.buy_price).toFixed(4),
							},
							sell:{
								time:item.sell_time,
								sum:Number(item.sell_price).toFixed(4),
							}
						}
					})
				}
			})
			console.log('订单详情页接收id' , this.id)
			// 在此请求订单详情信息
		},
		disposeStatus(val){
			return BusinessUtils.getProductStatusCode(val.pay_status, val.status, val.withdraw);
		},
		async copyText() {
			try {
				await clipboard.copy(this.dataInfo.token);
				this.$toast.success(this.$t('复制成功'));
			} catch {
				this.$toast.fail(this.$t('复制失败'));
			}
		}
	},
};
</script>

<style>
</style>